<template>
	<section class="scholl">
		<div class="border-box">			
			<ul 
				v-if="inviter_list.length > 0"
				v-infinite-scroll="loadData" 
				infinite-scroll-disabled="loading" 
				infinite-scroll-distance="10"
			>
				<li class="pb30rem pt30rem border-b" >
					<div class="pl30rem pr30rem layout">
						<div class="layout">
							<img class="shop-img" :src="inviter_list.icon" >
							<h2 class="fs30rem bold ml30rem">
								{{inviter_list.nick_name}}
							</h2>
						</div>
						<span class="fs24rem c999">
							{{inviter_list.invite_time}}
						</span>
					</div>			
				</li>
			</ul>						
		</div>			
	</section>
</template>

<script>
	import { getInviter } from "@/api/member";
	import { InfiniteScroll } from 'mint-ui';	

	export default {
		data() {
			return {
				inviter_list: [],
				loading    : false,				
				page_size  : 10,
				params: {
					uid        : localStorage.getItem('uid'),
					page_index : 1,
				}
			}			
		},
		directives:
		{
			InfiniteScroll
		},
		methods:
		{
			loadData()
			{
				this.loading = true;

				getInviter(this.params).then(res => {
					if(res.data.length > 0 )
					{
						this.inviter_list = this.inviter_list.concat(res.data);
						this.loading = false;
					}					
					if(res.data.length < this.page_size)
					{
						this.loading = true;
					}else{
						this.params.page_index++;
						this.loading = false;
					}
				})
			},
		},
		created()
		{
			this.loadData();
		}
	}
	
</script>

<style lang="less">
	.border-box{
		box-sizing: border-box;
		.shop-img{
			width: 90/28rem;
			height: 90/28rem;
			border-radius: 100%;
		}
		.c959595{
			color: #959595;
		}
		
	}
	.border-box * {
		box-sizing: border-box;
	}
	
	
</style>

